<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Segment - Custom</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-segment value="Free" id="custom-radius">
            <ion-segment-button value="Paid">
              <ion-label>Paid</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Free">
              <ion-label>Free</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Top">
              <ion-label>Top</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment value="Free" class="custom-checked">
            <ion-segment-button value="Paid">
              <ion-label>Paid</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Free">
              <ion-label>Free</ion-label>
            </ion-segment-button>
            <ion-segment-button value="Top">
              <ion-label>Top</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment class="custom-icon" value="instagram">
            <ion-segment-button class="segment-button-facebook" value="facebook">
              <ion-label>Facebook</ion-label>
              <ion-icon name="logo-facebook"></ion-icon>
            </ion-segment-button>
            <ion-segment-button class="segment-button-instagram" value="instagram">
              <ion-label>Instagram</ion-label>
              <ion-icon name="logo-instagram"></ion-icon>
            </ion-segment-button>
            <ion-segment-button class="segment-button-slack" value="slack">
              <ion-label>Slack</ion-label>
              <ion-icon name="logo-slack"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar class="themed">
          <ion-segment value="delete">
            <ion-segment-button value="create">
              <ion-label>Create</ion-label>
              <ion-icon name="create"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="delete">
              <ion-label>Delete</ion-label>
              <ion-icon name="trash"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="upload">
              <ion-label>Upload</ion-label>
              <ion-icon name="cloud-upload"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment class="custom-states-color" value="disabled">
            <ion-segment-button value="inactive">
              <ion-label>Inactive</ion-label>
            </ion-segment-button>
            <ion-segment-button value="inactive2">
              <ion-label>Inactive</ion-label>
            </ion-segment-button>
            <ion-segment-button value="disabled" disabled>
              <ion-label>Disabled</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment class="custom-states-background" value="checked">
            <ion-segment-button value="checked">
              <ion-label>Checked</ion-label>
            </ion-segment-button>
            <ion-segment-button value="inactive">
              <ion-label>Inactive</ion-label>
            </ion-segment-button>
            <ion-segment-button value="disabled" disabled>
              <ion-label>Disabled</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment class="custom-color" value="dining">
            <ion-segment-button value="dining">
              <ion-label>Dining</ion-label>
              <ion-icon name="cafe"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="travel">
              <ion-label>Travel</ion-label>
              <ion-icon name="airplane"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="entertainment">
              <ion-label>Entertainment</ion-label>
              <ion-icon name="radio"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>

        <ion-toolbar>
          <ion-segment class="custom-color" color="danger" value="dining">
            <ion-segment-button value="dining">
              <ion-label>Dining</ion-label>
              <ion-icon name="cafe"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="travel">
              <ion-label>Travel</ion-label>
              <ion-icon name="airplane"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="entertainment">
              <ion-label>Entertainment</ion-label>
              <ion-icon name="radio"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding-top">
        <ion-segment class="custom-active" value="active">
          <ion-segment-button value="active">
            <ion-label>Active</ion-label>
          </ion-segment-button>
          <ion-segment-button value="disabled" disabled="true">
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive" disabled="false">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment class="custom-icon" value="slack">
          <ion-segment-button class="segment-button-facebook" value="facebook">
            <ion-label>Facebook</ion-label>
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-segment-button>
          <ion-segment-button class="segment-button-instagram" value="instagram">
            <ion-label>Instagram</ion-label>
            <ion-icon name="logo-instagram"></ion-icon>
          </ion-segment-button>
          <ion-segment-button class="segment-button-slack" value="slack">
            <ion-label>Slack</ion-label>
            <ion-icon name="logo-slack"></ion-icon>
          </ion-segment-button>
        </ion-segment>

        <ion-segment class="custom-color" value="dining">
          <ion-segment-button value="dining">
            <ion-label>Dining</ion-label>
            <ion-icon name="cafe"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="travel">
            <ion-label>Travel</ion-label>
            <ion-icon name="airplane"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="entertainment">
            <ion-label>Entertainment</ion-label>
            <ion-icon name="radio"></ion-icon>
          </ion-segment-button>
        </ion-segment>

        <ion-segment class="custom-color" color="danger" value="dining">
          <ion-segment-button value="dining">
            <ion-label>Dining</ion-label>
            <ion-icon name="cafe"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="travel">
            <ion-label>Travel</ion-label>
            <ion-icon name="airplane"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="entertainment">
            <ion-label>Entertainment</ion-label>
            <ion-icon name="radio"></ion-icon>
          </ion-segment-button>
        </ion-segment>

        <ion-segment class="custom-states-color" value="checked">
          <ion-segment-button value="checked">
            <ion-label>Checked</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
          <ion-segment-button value="disabled" disabled>
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment class="custom-states-background" value="checked">
          <ion-segment-button value="checked">
            <ion-label>Checked</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
          <ion-segment-button value="disabled" disabled>
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-content>
    </ion-app>
  </body>

  <style>
    body {
      margin: 0;
    }

    ion-segment {
      margin-bottom: 10px;
    }

    ion-toolbar ion-segment {
      margin-bottom: 0;
    }

    #custom-radius ion-segment-button {
      --background: rgba(0, 0, 255, 0.1);
      --background-checked: rgba(0, 0, 255, 0.3);
      --border-radius: 10px;
    }

    /*
   * Custom Checked Segment (Paid, Free, Top)
   *
   * This tests that the colors are able to be overridden on
   * a segment inside of a toolbar
   *
   * Ripple color can be set on ion-segment
   *
   * Backgrounds / colors for the button must be set on the
   * ion-segment-button
   */
    .custom-checked {
      --ripple-color: purple;
    }

    .ios .custom-checked ion-segment-button {
      --color-checked: magenta;
      --indicator-color: red;
      --indicator-height: 50%;
    }

    .md .custom-checked ion-segment-button {
      --background-hover: rgba(17, 228, 10, 0.5);
      --color-checked: purple;
      --color-hover: blue;
      --indicator-color: red;
      --indicator-height: 5px;
    }

    /*
   * Custom Themed Segment (Themed to Primary)
   */
    .themed {
      --ion-toolbar-background: #3880ff;
      --ion-toolbar-color: #fff;

      /* Segment */
      --ion-toolbar-segment-indicator-color: #ffffff;
    }

    /* Material Design Segment */
    .md .themed {
      --ion-toolbar-segment-color: rgba(255, 255, 255, 0.6);
      --ion-toolbar-segment-color-checked: #ffffff;
      --ion-toolbar-segment-background-hover: rgba(255, 255, 255, 0.04);
    }

    /* iOS Segment */
    .ios .themed {
      --ion-toolbar-segment-background: rgba(255, 255, 255, 0.065);
      --ion-toolbar-segment-color: #ffffff;
      --ion-toolbar-segment-color-checked: #3880ff;
    }

    /*
   * Custom Active Segment (Active, Inactive, Disabled)
   */
    .custom-active {
      --background: papayawhip;

      --color: purple;
      --color-disabled: rgba(0, 0, 0, 0.3);
    }

    .ios .custom-active {
      --color-checked: papayawhip;
      --indicator-color: navy;
    }

    .md .custom-active {
      --color-checked: navy;
      --indicator-color: navy;
    }

    /*
   * Custom Icon Segment (Facebook, Instagram, Slack)
   */
    .custom-icon ion-icon {
      font-size: 44px;
    }

    /*
   * MD Custom Icon Segment (Facebook, Instagram, Slack)
   */
    .md .segment-button-facebook {
      --background-hover: rgb(58, 61, 70, 0.04);
      --color-checked: #3a3d46;
      --indicator-color: #3a3d46;
    }

    .md .segment-button-instagram {
      --background-hover: rgb(228, 64, 95, 0.04);
      --color-checked: #e4405f;
      --indicator-color: #e4405f;
    }

    .md .segment-button-slack {
      --background-hover: rgb(58, 175, 133, 0.04);
      --color-checked: #3aaf85;
      --indicator-color: #3aaf85;
    }

    /*
   * iOS Custom Icon Segment (Facebook, Instagram, Slack)
   */
    .ios .segment-button-facebook {
      --color: #3a3d46;
      --color-checked: #ffffff;
      --indicator-color: #3a3d46;
    }

    .ios .segment-button-instagram {
      --color: #e4405f;
      --color-checked: #ffffff;
      --indicator-color: #e4405f;
    }

    .ios .segment-button-slack {
      --color: #3aaf85;
      --color-checked: #ffffff;
      --indicator-color: #3aaf85;
    }

    /* This CSS should not apply */
    .custom-color {
      --background: purple;
      --color: blue;
    }

    .custom-states-color {
      --color: red;
      --color-disabled: blue;
      --color-checked: indigo;
      --color-hover: orange;
    }

    .custom-states-background ion-segment-button {
      --indicator-color: transparent;
      --indicator-box-shadow: none;
      --color: white;

      --background: red;
      --background-disabled: blue;
      --background-checked: indigo;
      --background-hover: orange;
    }

    .custom-states-background ion-segment-button:hover {
      opacity: 1;
    }
  </style>
</html>
